<template>
  <div class="father">
    <h3>父组件</h3>
    <h4>Money: {{ money }} w</h4>
    <h4>Car Brand: {{ car.brand }}, Car Price: {{ car.price }}</h4>
    <Child/>
  </div>
</template>

<script setup lang="ts" name="Father">
  import Child from './Child.vue'
  import { ref, reactive, provide } from 'vue'
 
  let car = reactive({
    brand: 'Banz',
    price: 180
  })
  let money = ref(100)

  function updateMoney(value:number) {
    money.value -= value
  }

  provide('moneyContext', {money, updateMoney})
  provide('car1', car)
</script>

<style scoped>
  .father {
    background-color: rgb(165, 164, 164);
    padding: 20px;
    border-radius: 10px;
  }
</style>